<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :visible="visible"
    title="详情"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-descriptions bordered :column="2" size="default">
      <a-descriptions-item label="设备ID">{{ form.recordId }}</a-descriptions-item>
      <a-descriptions-item label="上报时间">{{ form.uploadTime }}</a-descriptions-item>
      <a-descriptions-item label="三相电压A">{{ form.sensorAVoltage }} V</a-descriptions-item>
      <a-descriptions-item label="三相电压B">{{ form.sensorBVoltage }} V</a-descriptions-item>
      <a-descriptions-item label="三相电压B">{{ form.sensorCVoltage }} V</a-descriptions-item>
      <a-descriptions-item label="三相电流A">{{ form.sensorACurrent }} A</a-descriptions-item>
      <a-descriptions-item label="三相电流B">{{ form.sensorBCurrent }} A</a-descriptions-item>
      <a-descriptions-item label="三相电流C">{{ form.sensorCCurrent }} A</a-descriptions-item>
      <a-descriptions-item label="分相有功电能A">{{ form.aenergy }} KWH</a-descriptions-item>
      <a-descriptions-item label="分相有功电能B">{{ form.benergy }} KWH</a-descriptions-item>
      <a-descriptions-item label="分相有功电能C">{{ form.cenergy }} KWH</a-descriptions-item>
      <a-descriptions-item label="分相有功电能总">{{ form.energy }} KWH</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import { reactive, toRefs, watchEffect } from 'vue';

export default {
  name: 'DeviceLuoxunThreephaseDataDetail',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 详情数据
    data: Object
  },
  setup(props, context) {
    const data = reactive({
      form: {}
    });

    const watch = watchEffect(() => {
      if (props.data) {
        data.form = Object.assign({}, props.data);
      }
    });

    const updateVisible = value => {
      context.emit('update:visible', value);
    };

    return {
      ...toRefs(data),
      watch,
      updateVisible
    };
  }
};
</script>

<style scoped></style>
